<template>
	<view class="content" :style="{height:wh+'px'}" v-if="shoucang.length !== 0">
		<view class="swiper-box">
			<swiper class="swiper" :vertical="true" @change="changeplay($event)" @touchstart="touchStart($event)"
				@touchend="touchEnd($event)">
				<swiper-item v-for="(item,i) in reverseshoucang" :key="i">
					<!-- 视频 -->
					<view class="swiper-item">
						<videoplay @changeClick='changeClick' ref="player" :item="item" :index="i" :canshu="canshu"></videoplay>
					</view>
					<!-- 作者和内容 -->
					<view class="listleftbox">
						<list-Left :item="item"></list-Left>
					</view>
					<!-- 图标区 -->
					<view class="listrightbox">
						<list-Right :item="item" ref="right" @open-pinglun="openpinglun" ></list-Right>
					</view>
						<!-- 评论区 -->
					<view class="guanbi" @click="close"></view>
					<view class="pinglunqu" v-if="pl">
						<view class="top">
							<text></text>
							<text v-if="pinglun.length !== 0">{{totalpl}}条评论</text>
							<!-- 暂无评论时显示 -->
							<text v-else>{{nopinglun}}</text>
							<uni-icons type="closeempty" size="15" class="close" @click="close"></uni-icons>
						</view>
						<view class="content">
							<scroll-view :scroll-y="true" class="scroll" :show-scrollbar="true">
								<!-- uni-swipe-action 是最外层包裹性质的容器 -->
								<block v-for="(item,i) in reversepinglun" :key="i" v-if="pinglun.length !== 0">
									<view class="pinglun-box">
										<view class="left">
											<image :src="item.touxiang" mode=""></image>
										</view>
										<view class="right">
											<view class="name">{{item.name}}</view>
											<view class="neirong">{{item.liuyan}}</view>
											<!-- slice截取字符串 -->
											<view class="time">{{item.datetime.slice(5,16)}}</view>
											<view class="delete" @click="deletepl(item)">
												<image src="../../static/关闭.png" mode=""></image>
											</view>
										</view>
									</view>
					            </block>
								<view class="zanwupl" v-else>畅所欲言吧！</view>
							</scroll-view>
						</view>
						<view class="bottom">
							<input type="text" v-model="liuyan" placeholder="善语结善缘,恶言伤人心"
								placeholder-class="placeholderClass">
							<view class="fasong" @click="fasong">
								发送
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<view class="no-video" v-else>
	   未添加收藏视频
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	var time = null
	export default {
		data() {
			return {
				//页面开始位置
				pagestatry: 0,
				//页面结束位置
				pageEndy: 0,
				//所处页面索引号
				page: 0,
				//可用高度
				wh: 0,
				//传过来的参数
				canshu:'',
				//接受list-Right打开评论区的值
				pl: '',
				//留言
				liuyan: '',
				//当前时间
				newtime: {},
				//为每一个评论创建id
				id: 0,
				//创建每一条评论数量
				pinglunsl: 1,
				//暂无评论
				nopinglun: '暂无评论',
			
			};
		},
		// options表示传过来的参数
		onLoad(options) {
			// 获取当前系统的信息
			const sysInfo = uni.getWindowInfo()
			// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 
			this.wh = sysInfo.windowHeight
			//将页面参数转存到canshu中
			this.canshu = options.i || ''
			this.getnewtime()
			
		},
		methods: {
			...mapMutations('m_video', ['addpinglun', 'deletepinglun']),
			//获取最新时间
			async getnewtime() {
				const res = await uni.$http.get('/api/getTime')
				if (res.data.code !== 200) return uni.$showMsg(res.data.message)
				this.newtime = res.data.result
				// console.log(res.data.result);
			},
			changeClick(i) {
				//双击点赞 调用子组件listright的方法
				this.$refs.right[i].change()
				// console.log(res);
			},
			//上下滑动触发事件
			changeplay(res) {
				clearTimeout(time)
				//当前所处页面的索引号
				this.page = res.detail.current
				time = setTimeout(() => {
					if (this.pageStatrY < this.pageEndY) {
						console.log('向上滑动')
						setTimeout(() => {
							this.$refs.player[this.page].player()
						}, 20)
						this.$refs.player[this.page + 1].pause()
						this.pageStatrY = 0
						this.pageEndY = 0
						this.close()
					} else {
						console.log('向下滑动')
						setTimeout(() => {
							this.$refs.player[this.page].player()
						}, 20)
						this.$refs.player[this.page - 1].pause()
						this.pageStatrY = 0
						this.pageEndY = 0
			            this.close()
					}
				}, 1)
			},
			//获取向下滑动的值
			touchStart(res) {
				this.pageStatrY = res.changedTouches[0].pageY
				// console.log(this.pageStatrY)
			
			},
			//获取向上滑动的值
			touchEnd(res) {
				this.pageEndY = res.changedTouches[0].pageY
				// console.log(this.pageEndY)
			},
			//打开评论区
			openpinglun(e) {
				this.pl = e.pinglun
			},
			//关闭评论区
			close() {
				this.pl = false
			},
			//发送评论内容
			fasong() {
					if (!this.liuyan.trim()) return uni.$showMsg('评论内容不能为空哦')
				//调用时间，让时间更新
				this.getnewtime()
				//id加加，让每一个评论的id都不一样
				this.id++
				const liuyan = {
					liuyan: this.liuyan,
					touxiang: this.userimage,
					name: this.userjieshao.name,
					datetime: this.newtime.dateTime,
					id: this.id,
					size: this.pinglunsl
				}
				this.getnewtime()
				this.addpinglun(liuyan)
				this.liuyan = ''
			},
			//根据id删除评论
			deletepl(item) {
				this.deletepinglun(item)
			}
			
		},
		computed: {
			...mapState('m_video', ['shoucang','pinglun']),
			...mapState('m_user', ['userimage', 'userjieshao']),
			...mapGetters('m_video', ['totalpl']),
			//让最新评论在第一行
			reversepinglun() {
				return [...this.pinglun].reverse()
			},
			//倒序排列
			reverseshoucang() {
				return [...this.shoucang].reverse()
			}
		}
	}
</script>

<style lang="scss">
	.no-video{
		text-align: center;
		padding-top: 500rpx;
		font-weight: bold;
		font-size: 23px;
	}
	.content {
		background-color: black;

		width: 100%;

		.swiper-box {
			height: 100%;
			width: 100%;
			position: relative;

			.swiper {
				height: 100%;
				width: 100%;
				position: relative;
				.guanbi {
					position: absolute;
					width: 100%;
					height: 25%;
					z-index: 30;
					
				}
				.pinglunqu {
					position: absolute;
					width: 100%;
					height: 75%;
					background-color: white;
					z-index: 30;
					left: 0%;
					bottom: 0%;
				
					.top {
						position: fixed;
						padding: 10rpx 10rpx;
						width: 100%;
						height: 60rpx;
						text-align: center;
						background-color: white;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 13px;
						font-weight: bold;
						left: 0%;
					}
				
					.content {
						padding: 60rpx 0rpx 100rpx 20rpx;
				
						width: 100%;
						background-color: white;
						height: 100%;
				
						.scroll {
				
							height: 100%;
				
							.pinglun-box {
								display: flex;
								width: 100%;
								margin-bottom: 20rpx;
				
				
								.left {
									width: 15%;
				
									text-align: center;
									margin-right: 5rpx;
				
									image {
										width: 80rpx;
										height: 80rpx;
										border-radius: 50%;
									}
								}
				
								.right {
									flex: 1;
									position: relative;
									// background-color: #757576;
									margin-right: 20rpx;
				
									.name {
										color: #d4d5d6;
										font-size: 13px;
				
									}
				
									.neirong {
										width: 600rpx;
										padding: 5rpx 0rpx;
										font-weight: 600;
										font-size: 14px;
									}
				
									.time {
										color: #d4d5d6;
										font-size: 13px;
									}
				
									.delete {
										position: absolute;
				
										width: 40rpx;
										height: 40rpx;
										right: 0%;
										bottom: 0%;
										text-align: right;
				
										image {
											width: 20rpx;
											height: 20rpx;
										}
									}
				
								}
							}
							.zanwupl{
								font-weight: bold;
								text-align: center;
								padding-top: 250rpx;
								
							}
							
						}
				
					}
				
					.bottom {
						height: 100rpx;
						border-top: 0.1px solid #d4d5d6;
						display: flex;
						position: fixed;
						justify-content: space-between;
						align-items: center;
						bottom: 0%;
						left: 0%;
						width: 100%;
						background-color: white;
						padding: 20rpx 20rpx;
				
						input {
							width: 75%;
							padding: 15rpx 30rpx;
							background-color: #eeee;
							border-radius: 40px;
							margin-right: 10rpx;
				
							.placeholderClass {
								font-size: 15px;
							}
						}
				
						.fasong {
							flex: 1;
							background-color: greenyellow;
							font-size: 15px;
							text-align: center;
							height: 70rpx;
							line-height: 70rpx;
							border-radius: 10px;
							color: white;
							font-weight: bold;
						}
					}
				}

				.swiper-item {
					background-color: black;
					height: 90%;
					width: 100%;
					z-index: 19;
					position: absolute;
				}

				.listleftbox {
					z-index: 20;
					position: absolute;

					width: 85%;
					bottom: 3%;
					left: 3%;
				}

				.listrightbox {

					z-index: 20;
					position: absolute;
					bottom: 50px;
					bottom: 3%;
					right: 2%;
					color: #ffffff;
				}

			}
		}
	}
</style>
